<template>
    <div class="container">
        <el-space wrap :size="50">
            <el-card class="card-left">
                <template #header>
                    <div class="card-header">
                        <b>{{ $t('textView.randomPractice') }}</b>

                    </div>
                </template>

                <div style="text-align: center;height:440px;">
                    <h3>{{ $t('textView.t2') }}</h3>
                    <div class="font">{{ $t('textView.t3') }}</div>
                    <div class="font">{{ $t('textView.t4') }}</div>



                    <h3>{{ $t('textView.t5') }}</h3>
                    <div style="margin-top: 20px;margin-left: 11%;">
                        <el-form :model="problemParm" label-width="auto">
                            <el-form-item :label="$t('problemView.type')">
                                <el-radio-group v-model="problemParm.type">
                                    <div>
                                        <el-radio style="width: 100px;" border>{{ $t('enum.all') }}</el-radio>
                                        <el-radio style="width: 100px;" :value="1" border>{{ $t('enum.single') }}</el-radio>
                                        <el-radio style="width: 100px;" :value="2" border>{{ $t('enum.fill') }}</el-radio>
                                    </div>
                                    <div>
                                        <el-radio style="width: 100px;" :value="3" border>{{ $t('enum.judge') }}</el-radio>
                                        <el-radio style="width: 100px;" :value="4" border>{{ $t('enum.multiple') }}</el-radio>
                                        <el-radio style="width: 100px;" :value="5" border>{{ $t('enum.big') }}</el-radio>
                                    </div>
                                </el-radio-group>
                            </el-form-item>

                            <el-form-item :label="$t('problemView.difficulty')">
                                <el-radio-group v-model="problemParm.difficulty">
                                    <el-radio style="width: 100px;" border>{{ $t('enum.all') }}</el-radio>
                                    <el-radio style="width: 100px;" :value="1" border>{{ $t('enum.simple') }}</el-radio>
                                    <el-radio style="width: 100px;" :value="2" border>{{ $t('enum.medium') }}</el-radio>
                                    <el-radio style="width: 100px; margin-top: 10px;" :value="3"
                                        border>{{ $t('enum.difficulty') }}</el-radio>
                                </el-radio-group>
                            </el-form-item>


                        </el-form>
                    </div>

                </div>
                <div style="text-align: left;">
                    <el-button type="primary" link style="font-size: 13px;" @click="showProblemRecord = true">
                        <div style="margin-bottom: -40px;">{{ $t('textView.t6') }}</div>
                    </el-button>
                    <el-button type="primary" style="margin-left: 30%;" plain size="large"
                        @click="toStartProblem(problemParm)">{{ $t('textView.t7') }}</el-button>
                </div>
            </el-card>


            <el-card class="card-right">
                <template #header>
                    <div class="card-header">
                        <b>{{ $t('textView.t8') }}</b>
                    </div>
                </template>

                <div style="text-align: center;height:450px;">
                    <h3>{{ $t('textView.t9') }}</h3>
                    <div class="font">{{ $t('textView.t10') }}</div>
                    <div class="font">{{ $t('textView.t11') }}</div>
                    <div class="font">{{ $t('textView.t21') }}</div>
                    <div class="font">{{ $t('textView.t20') }}</div>
                    <div class="font">{{ $t('textView.t12') }}</div>
                    <div class="font">{{ $t('textView.t13') }}</div>

                    <h3>{{ $t('textView.t14') }}</h3>
                    <div style="height: 190px;">
                        <div class="font">{{ $t('textView.t15') }}{{ score }}</div>

                        <div class="font">{{ $t('textView.t16') }}{{ ranking ? ranking.ranking : "" }}</div>
                        <div class="echarts" ref="chartRef"></div>
                    </div>
                </div>

                <div style="text-align: left;">
                    <el-button type="success" link style="font-size: 13px;" @click="showTestRecord = true">
                        <div style="margin-bottom: -20px;">{{ $t('textView.t17') }}</div>
                    </el-button>
                    <el-button type="success" plain size="large" style="margin-left: 31%;"
                        @click="toStartTest()">{{ $t('textView.t18') }}</el-button>
                </div>
            </el-card>
        </el-space>
        <div style="text-align: center;margin-left: -150px;">
            <h3>{{ $t('textView.t19') }}：</h3>{{ dailyWord }}
        </div>
    </div>



    <el-dialog v-model="showProblemRecord" width="1200">
        <template #header class="card-header">
            <b>刷题记录</b>
        </template>
        

        <problemRecordView />
    </el-dialog>

    <el-dialog v-model="showTestRecord" width="1200">
        <template #header class="card-header">
            <b>测验记录</b>
        </template>

        <testRecordView v-if="showTestRecord" />
    </el-dialog>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import useApi from '@/hooks/useAPI'
import useProblem from '@/hooks/useProblem';
import useEcharts from '@/hooks/useEcharts'
import useTest from '@/hooks/useTest'
import problemRecordView from './son/problemRecordView.vue'
import testRecordView from './son/testRecordView.vue';
const showProblemRecord = ref(false)
const showTestRecord = ref(false)

const { dailyWord, getDailyWord } = useApi()
const { problemParm } = useProblem()
const { score, ranking, chartRef, init } = useEcharts();

const { toStartTest, toStartProblem } = useTest()
onMounted(() => {
    setTimeout(() => { getDailyWord() }, 1000)
    init(localStorage.getItem("loginUserId"))
})

</script>


<style scoped>
.container {
    margin-top: 4%;
    margin-left: 12%;
}


.card-left {
    /* transform: translateX(-50%);  */
    animation: slideIn 2s ease-out forwards 0.5s;
    box-shadow: 0 15px 20px rgba(84, 84, 84, 0.3);
    transition: all 0.3s ease;
    float: left;
    /* margin-left: 9%; */
    width: 550px;
    height: 0px;


}

.card-right {
    /* transform: translateX(50%);  */
    animation: slideIn 2s ease-out forwards 0.5s;
    box-shadow: 0 15px 20px rgba(84, 84, 84, 0.3);
    /* margin-left: 53%; */
    width: 550px;
    height: 0px;


}

.card-header {
    font-size: 20px;
    text-align: center;
}

.font {
    margin-top: 5px;
    font-size: 18px;
}

.font {
    margin-top: 5px;
    font-size: 18px;
}

.card-header {
    font-size: 20px;
    text-align: center;
}

.echarts {
    margin-top: -10%;
    height: 100%;
    width: 100%;
}

@keyframes slideIn {
    to {
        height: 600px;
    }
}</style>